<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨域Cookie测试</title>
</head>
<body>
    <h3>跨域Cookie测试</h3>
    <button onclick="setCookie()">1. 向localhost:8080设置Cookie</button>
    <button onclick="getCookie()">2. 向api.localhost:8080读取Cookie</button>
    <div id="result" style="margin-top: 20px; color: red;"></div>

    <script>
        // 后端接口基础地址（两个域名模拟跨域）
        const baseUrl1 = "http://localhost:8080";  // 第一个域名
        const baseUrl2 = "http://api.localhost:8080";  // 第二个域名（跨域）

        // 1. 向第一个域名设置Cookie
        function setCookie() {
            fetch(`${baseUrl1}/set-cookie`, {
                method: "GET",
                credentials: "include"  // 允许携带Cookie（同域也建议加）
            }).then(res => res.text())
              .then(data => {
                  document.getElementById("result").innerText = data;
              });
        }

        // 2. 向第二个域名读取Cookie（跨域请求）
        function getCookie() {
            fetch(`${baseUrl2}/get-cookie`, {
                method: "GET",
                credentials: "include"  // 关键：跨域请求必须开启，否则不携带Cookie
            }).then(res => res.text())
              .then(data => {
                  document.getElementById("result").innerText = data;
              });
        }
    </script>
</body>
</html>